<html>

<head>
  <script type="module" src="../packages/wired-progress/lib/wired-progress.js"></script>
  <script type="module" src="../packages/wired-button/lib/wired-button.js"></script>

  <style>
    body {
      margin: 0;
      padding: 10px;
      font-family: sans-serif;
      line-height: 1.5;
    }

    wired-progress {
      margin: 10px;
    }

    wired-button {
      margin: 0 10px;
    }

    .custom {
      --wired-progress-color: rgba(220, 0, 50, 0.1);
      --wired-progress-label-color: green;
      width: 300px;
      height: 2em;
    }
  </style>
</head>

<body>
  <wired-progress value="25"></wired-progress>
  <wired-progress value="65" percentage></wired-progress>
  <wired-progress class="custom" value="30"></wired-progress>
  <section style="margin-top: 16px;">
    <wired-progress id="progress"></wired-progress>
    <div style="margin-top: 16px;">
      <wired-button id="btns">Start</wired-button>
      <wired-button id="btnr">Stop</wired-button>
    </div>
  </section>

  <script>
    const prog = document.getElementById('progress')
    let timer = 0;
    document.getElementById('btns').addEventListener('click', () => {
      if (timer) {
        window.clearInterval(timer);
      }
      timer = window.setInterval(() => {
        if (prog.value >= 100) {
          prog.value = 0;
        } else {
          prog.value = prog.value + 1;
        }
      }, 100);
    });
    document.getElementById('btnr').addEventListener('click', () => {
      if (timer) {
        window.clearInterval(timer);
        timer = 0;
      }
      prog.value = 0;
    });
  </script>
</body>

</html>